<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <header>
        <div class="area">
            <div class="logo"></div>
            <div class="login">
                <a href="">登入</a>
                <a href="">注册</a>
            </div>
            <div class="nav" id="nav">
                <ul>
                    <li>
                        <a href="">
                            <p>首页</p>
                            <span>Home</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <p>寓</p>
                            <span>Apartment</span>
                        </a>
                        <div class="menu_first">
                            <div class="list arrow">北京站
                                <div class="menu_second">
                                    <a href="">建国门和平自如寓</a>
                                    <a href="">Meeta自如寓</a>
                                    <a href="">城市之光自如寓</a>
                                    <a href="">将府全智能自如寓</a>
                                    <a href="">亚运村15自如寓</a>
                                    <a href="">西直门梧桐自如寓</a>
                                    <a href="">欢乐谷工场自如寓</a>
                                    <a href="">望京阳光自如寓</a>
                                    <a href="">上地凌云自如寓</a>
                                </div>
                            </div>
                            <div class="list arrow">上海站
                                <div class="menu_second">
                                    <!--
                                    <a href="/project/getDetail/7bxkzry.html">七宝星空自如寓</a>
                                    -->
                                    <a href="">其灵自如寓</a>
                                    <a href="">长寿路拾光自如寓</a>
                                </div>
                            </div>
                            <div class="list arrow">深圳站
                                <div class="menu_second">
                                    <a href="">龙华筑梦自如寓</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="">
                            <p>社区</p>
                            <span>Community</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <p>关于我们</p>
                            <span>About Us</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <p>自如网</p>
                            <span>Ziroom</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        </div>
    </header>
    <div class="index-container" id="index-container">
        <div class="swiper-container" id="swiper-container">
            <img src="./img/58571462420232929.jpg" alt="">
            <img src="./img/72031462420232590.jpg" alt="">
            <img src="./img/75931462420233221.jpg" alt="">
        </div>
    </div>
    <div id="pagination">
        <span class="active" style="color: black;">1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
<script>
    let imgBox = document.getElementById("swiper-container")
    let img = imgBox.querySelectorAll("img")
    let box = document.getElementById("index-container")
    let pagination = document.querySelectorAll("#pagination > span")
    window.addEventListener('resize', function () {
        location.reload();
    })
    let imgHight = parseFloat(getComputedStyle(img[0])["width"]);
    for (let i = 0; i < pagination.length; i++) {
        pagination[i].addEventListener("click", function () {
            imgBox.style.left = -1 * i * imgHight + "px"
            for (let j = 0; j < pagination.length; j++) {
                pagination[j].className = ""
                pagination[j].style = ""
            }
            pagination[i].className = "active"
            pagination[i].style.color = "#000000"
        })
    }
    let time = setInterval(function () {
        let a = parseFloat(getComputedStyle(imgBox)["left"])
        if (a === 0) {
            for (let k = 0; k < pagination.length; k++) {
                pagination[k].className = ""
                pagination[k].style.color = ""
            }
            pagination[1].className = "active"
            pagination[1].style.color = "#000000"
        } else if (a === -imgHight) {
            for (let k = 0; k < pagination.length; k++) {
                pagination[k].className = ""
                pagination[k].style.color = ""
            }
            pagination[2].className = "active"
            pagination[2].style.color = "#000000"
        }
        else if (a === -2 * imgHight) {
            for (let k = 0; k < pagination.length; k++) {
                pagination[k].className = ""
                pagination[k].style.color = ""
            }
            pagination[0].className = "active"
            pagination[0].style.color = "#000000"
        }
        imgBox.style.left = a - imgHight + "px"
        console.log(a);
        if (a === -2 * imgHight) {
            imgBox.style.left = "0px"
        }
    }, 5000)

</script>

</html>